<template>
  <a-modal
    v-model:visible="addCodeTable1"
    :title="codeDialogName1"
    :width="500"
    @ok="props.dialogStatue === 'edit' ? handleEditOk() : handleOk()"
    @Cancel="props.dialogStatue === 'edit' ? handleEditCancel() : handleCancel()"
  >
    <a-form :model="formState" name="basic" autocomplete="off">
      <a-form-item label="名称" name="dirName" :rules="rules">
        <a-input v-model:value="formState.dirName" placeholder="请输入分类名称" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script setup lang="ts">
  import { message } from 'ant-design-vue';
  import { ref, defineEmits, watch } from 'vue';
  // import { DataTree } from '../type/index';
  import { addDir, updateDir } from '@/api/test/interFace';
  const props = defineProps({
    dataName: {
      type: String,
    },
    dialogStatue: {
      type: String,
    },
    addCodeTable: {
      type: Boolean,
      default: false,
    },
    dataDetil: {
      type: Object,
      default: () => {
        return;
      },
    },
  });
  let formState = reactive({});
  const emit = defineEmits(['changeShow', 'editSuccessed', 'addSuccessed']);
  const addCodeTable1 = ref<boolean>(false);
  const codeDialogName1 = ref<string>('');
  watch(
    () => props.addCodeTable,
    (nvalue: boolean) => {
      addCodeTable1.value = nvalue;
      if (nvalue == false) {
        return;
      }
      if (props.dialogStatue == 'edit') {
        codeDialogName1.value = '分类编辑';
        formState.dirId = props.dataDetil.dirId;
        formState.dirName = props.dataDetil.dirName;
      }
      if (props.dialogStatue == 'add') {
        codeDialogName1.value = '新增下级分类';
        formState.dirName = '';
        formState.dirParents = props.dataDetil.dirId;
      }
      if (props.dialogStatue == 'addOne') {
        codeDialogName1.value = '新增一级分类';
        formState.dirName = '';
        formState.dirParents = 0;
      }
    },
  );
  //新增目录
  const handleOk = () => {
    let data = {
      dirName: formState.dirName,
      dirParents: formState.dirParents,
    };
    if (formState.dirName == '') {
      alert('名称不能为空！');
    } else {
      addCodeTable1.value = false;
      addDir(data).then((res: any) => {
        if (res.code == 100200) {
          message.success('新增成功！');
          emit('addSuccessed', data);
          emit('changeShow', 'tree');
        } else {
          message.error(res.msg);
        }
      });
    }
  };

  // 编辑目录
  const handleEditOk = () => {
    let datas = {
      dirName: formState.dirName,
      dirId: formState.dirId,
    };
    addCodeTable1.value = false;
    updateDir(datas).then((res: any) => {
      if (res.code == 100200) {
        emit('editSuccessed', datas);
        emit('changeShow', 'tree');
        message.success('编辑成功！');
      } else {
        message.error(res.msg);
      }
    });
  };
  //调用新增弹窗的关闭按钮方法
  const handleCancel = () => {
    emit('changeShow', 'tree');
  };
  //调用编辑弹窗的关闭按钮方法
  const handleEditCancel = () => {
    emit('changeShow', 'tree');
  };

  // 检查名字是否重复
  // const NameValidator = (_rule: any, value: string) => {
  //   if (value) {
  //     let nameLength = 0;
  //     if (props.dataName?.split(',').indexOf(value) !== undefined) {
  //       nameLength = props.dataName?.split(',').indexOf(value);
  //     }
  //     if (nameLength == -1) {
  //       return Promise.resolve();
  //     } else {
  //       return new Promise((resolve, reject) => {
  //         reject('码表名称不能重复');
  //       });
  //     }
  //   } else {
  //     return Promise.resolve();
  //   }
  // };
  //规则校验
  const rules = [
    { required: true, message: '标准名称不能为空!', trigger: ['blur', 'change'] },
    // { validator: NameValidator, trigger: ['blur', 'change'] },
  ];
</script>
<style lang="less" scoped>
  .ant-input {
    margin-left: 5px;
    width: 320px;
    height: 32px;
  }
</style>
